import React, { Component } from 'react'
import './index.css'

export default class Item extends Component {

state = {
	mouse:false,// 鼠标移入移出
}
// 鼠标移入移出方法
handelMouse = (flag)=>{
return ()=>{
	this.setState({
		mouse:flag
	})
}

}// 勾选的todo
handelCheck = (id)=>{
return (event)=>{
	this.props.updateTodo(id,event.target.checked)
	// console.log(id,event.target.checked);
}
}
// 删除
handelDelete(id){
	if(window.confirm('确定删除？')){
this.props.deleteTodo(id)
	}

}

	render() {
		const {id,name,done} = this.props
		return (
			<li style={{backgroundColor:this.state.mouse ? '#ddd' : 'white'}} onMouseEnter={this.handelMouse(true)} onMouseLeave={this.handelMouse(false)} >
				<label>
					<input checked={done} type="checkbox" onChange={this.handelCheck(id)}  />
					<span>{name}</span>
				</label>
				<button  className="btn btn-danger"  style={{display:this.state.mouse ? 'block':'none'}} onClick={()=>this.handelDelete(id)}>删除</button>
			</li>
		)
	}
}